<template>
	<view class="app_Cont">
		<view v-if="showCont" :class="formData.pay_status>2?'showCont noBottom':'showCont'">
			<view class="bannerCont">
				<view class="topCenter">
					<view class="orderHead">
						<view class="orderStatus" v-if="formData.pay_status==1">
							<view class="iconfont icon-dengdai"></view>
							<view>待付款</view>
						</view>
						<view class="orderStatus" v-if="formData.pay_status==2">
							<view class="iconfont icon-dengdai"></view>
							<view>待使用</view>
						</view>
						<view class="orderStatus" v-if="formData.pay_status==3">
							<view class="iconfont icon-tuikuan"></view>
							<view>已取消</view>
						</view>
						<view class="orderStatus" v-if="formData.pay_status==4">
							<view class="hasBorder iconfont icon-gouxuan1"></view>
							<view>已完成</view>
						</view>
						<view class="orderMoney" >¥{{formData.pay_money}}</view>
					</view>
				</view>
			</view>
			<view class="formCont hasTop">
				<view class="erweimaCont" v-if="formData.pay_status==2">
					<image :src="formData.qr_code"></image>
					<view class="erweimaTip">核销时请出示此二维码</view>
				</view>
				<view class="formTitle">订单信息</view>
				<view class="formDesItem">
					<view class="desName">订单编号</view>
					<view :class="formData.pay_status==3?'desText deleteText':'desText'">{{formData.sign_number}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">支付定金</view>
					<view class="desText">¥{{formData.pay_money}}<span class="redText" v-if="formData.pay_status==3&&formData.pay_time == '- -'">（已退款）</span></view>
				</view>
				<view class="formDesItem">
					<view class="desName">创建时间</view>
					<view class="desText">{{formData.create_time}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">支付时间</view>
					<view class="desText">{{formData.pay_time}}</view>
				</view>
				<view class="formDesItem" v-if="formData.pay_status==4">
					<view class="desName">完成时间</view>
					<view class="desText">{{formData.complete_time}}</view>
				</view>
				<view class="formDesItem" v-if="formData.pay_status==5">
					<view class="desName">取消时间</view>
					<view class="desText">{{formData.cancel_time}}</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle">办理人信息</view>
				<view class="formDesItem">
					<view class="desName">姓名</view>
					<view class="desText">{{formData.real_name}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">手机号</view>
					<view class="desText">{{formData.mobile}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">身份证号</view>
					<view class="desText">{{formData.id_card}}</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle">证书邮寄信息</view>
				<view class="formDesItem">
					<view class="desName">收货人</view>
					<view class="desText">{{formData.zs_shr}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">手机号</view>
					<view class="desText">{{formData.zs_mobile}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">详细地址</view>
					<view class="desText">{{formData.zs_city}}{{formData.zs_address}}</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle">培训信息</view>
				<view class="formDesItem">
					<view class="desName">培训名称</view>
					<view class="desText">{{formData.training_content.training_name}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">培训时长</view>
					<view class="desText">{{formData.training_content.training_time}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">开班时间</view>
					<view class="desText">{{formData.training_content.training_sk_time}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">培训学校</view>
					<view class="desText">{{formData.training_content.training_school_name}}</view>
				</view>
				<view class="formDesItem">
					<view class="desName">报道地点</view>
					<view class="desText">{{formData.training_content.training_address}}</view>
				</view>
			</view>
			<view class="cardItem">
				<view class="cardHead cardFlex">
					<view>费用说明</view>
					<view class="cardMoney">合计：¥{{formData.total_money}}</view>
				</view>
				<view class="cardForm">
					<view :class="index%2==0?'formItem ':'formItem formItemPlain'" :key="index" v-for="(item,index) in formData.training_content.tuition_fee_data">
						<view class="formName">{{item.name}}</view>
						<view :class="index%2==0?'formText':'formText formTextPalin'">
							<view>
								<text v-if="index==0">{{item.content}}<text class="redText">（{{item.money}}元）</text></text>
								<text v-if="index>0">
									<text v-if="Number(item.money)">需到校缴费<text class="redText">（{{item.money}}元）</text></text>
									<text v-if="!Number(item.money)">已含在培训费内，无需额外缴纳</text>
								</text>
							</view>
							<view class="formTextDes" v-if="index>0&&item.content">说明：{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="underFlex" v-if="formData.pay_status<=2">
				<view class="ctrlGroup">
					<view :class="formData.pay_status==2?'ctrlBtn flexPull':'ctrlBtn'" v-if="formData.pay_status==1||formData.pay_status==2" @click="cancelFn">取消订单</view>
					<view class="ctrlBtn has_bg" v-if="formData.pay_status==1" @click="signFn">立即支付</view>
				</view>
			</view>
		</view>
		<subLoad v-if="showSub"></subLoad>
		<load v-if="!showCont"></load>
		<u-modal :show="showModal" :showCancelButton="true" @cancel="showModal = false" title="成功提示" @confirm="modalSure"  :content='modalCont'></u-modal>
	</view>
</template>

<script>
	import subLoad from '@/components/sub.vue'
	import api from '@/http/api.js'
	import load from '@/components/load.vue'
	export default {
		components:{subLoad,load},
		data() {
			return {
				showCont:false,
				showModal:false,
				showSub:false,
				modalCont:'',
				formData:{},
			};
		},
		methods:{
			modalSure(){
				let data = {
					user_training_sign_id:this.detailId,
				}
				this.showModal = false
				this.showSub = true
				api.getRequst(data,'/api/My/trainingRecordCancel').then((res)=>{
					if(res.code==1){
						this.getData()
					}
					this.showSub = false
				})
			},
			cancelFn(){
				this.showModal = true
				let str = ''
				if(this.formData.pay_status==2){
					str = '金额原路退回账户'
				}
				this.modalCont = '确认取消此订单吗？'+str
			},
			getData(){
				let data = {
					user_training_sign_id:this.detailId,
				}
				api.getRequst(data,'/api/My/trainingRecordDetails').then((res)=>{
					if(res.code==1){
						this.formData = res.data
					}
					this.showCont = true
				})
			}
		},
		onLoad(option) {
			this.detailId = option.id
			this.getData()
		}
	}
</script>

<style lang="scss">
.showCont{
	min-height: 100vh;
	overflow: hidden;
	padding-bottom: 140rpx;
	.bannerCont{
		width: 150%;
		background-color:#3f55cc;
		margin-left: -25%;
		border-radius: 0 0 50% 50%;
		padding: 180rpx 25% 100rpx;
		color: #fff;
		box-sizing: border-box;
		.topCenter{
			width: 100%;
			padding: 0 4%;
			box-sizing: border-box;
			.orderHead{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.orderStatus{
					display: flex;
					align-items: center;
					font-size: 40rpx;
					.iconfont{
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						// background-color: #fff;
						color: #fff;
						text-align: center;
						line-height: 50rpx;
						font-size: 50rpx;
						margin-right: 30rpx;
					}
					.hasBorder{
						background-color: #fff;
						color: #3f55cc;
					}
				}
				.orderMoney{
					color: #fff;
					font-size: 50rpx;
				}
			}
			
		}
	}
	.formCont{
		background-color: #fff;
		border-radius: 30rpx;
		padding: 40rpx 30rpx 30rpx;
		width: 92%;
		margin: 30rpx auto 30rpx;
		box-sizing: border-box;
		.erweimaCont{
			width: 100%;
			text-align: center;
			image{
				width: 300rpx;
				height: 300rpx;
				
			}
			.erweimaTip{
				font-size: 24rpx;
				// color: #333;
				margin-bottom: 20rpx;
			}
		}
		.formTitle{
			font-size: 32rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.addBtn{
				font-size: 24rpx;
				font-weight: normal;
				color: #3f55cc;
			}
		}
		.formDesItem{
			width: 100%;
			display: flex;
			margin-bottom: 20rpx;
			justify-content: space-between;
			.desName{
				color: #333;
				width: 120rpx;
				text-align: right;
				margin-right: 30rpx;
			}
			.desText{
				flex: 1;
				width: 100rpx;
				text-align: right;
			}
			.deleteText{
				text-decoration: line-through;
				color: #333;
			}
		}
	}
	.cardItem{
		width: 92%;
		margin: 30rpx auto;
		background-color: #fff;
		padding: 30rpx 4%;
		box-sizing: border-box;
		border-radius: 20rpx;
		.cardHead{
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.cardFlex{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cardMoney{
				color: #ff5757;
				font-size: 28rpx;
				font-weight: normal;
			}
		}
		.cardForm{
			border-radius: 20rpx;
			overflow: hidden;
			.formItem{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				background-color: #d6e0fb;
				.formName{
					padding:30rpx 20rpx;
					width: 140rpx;
					box-sizing: border-box;
				}
				
				.formText{
					flex: 1;
					padding:30rpx 20rpx;
					width: 100rpx;
					background-color: #ebf1fb;
					.formTextDes{
						color: #999;
					}
				}
				.formTextPalin{
					background-color: #dee3f8;
				}
			}
			.formItemPlain{
				background-color: #cbd3fa;
			}
		}
		.formOtherDes{
			color: #666;
			font-size: 24rpx;
			margin-top: 30rpx;
		}
	}
	.hasTop{
		margin-top: -60rpx;
	}
	.underFlex{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 4%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.saveBtn{
			color: #666;
			font-size: 60rpx;
		}
		.ctrlGroup{
			flex: 1;
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.ctrlBtn{
				width: 48%;
				text-align: center;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				// background-color: #f8f8f8;
				border: 1px solid #3f55cc;
				color: #3f55cc;
				border-radius: 10rpx;
			}
			.flexPull{
				width: 100%;
			}
			.has_bg{
				background-color: #3f55cc;
				color: #fff;
			}
		}
	}
}
.noBottom{
	padding-bottom: 0rpx;
}
</style>
